<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>名片册系统 - 优雅登录</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Microsoft YaHei', 'PingFang SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
        }
        
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: linear-gradient(135deg, #a8b5f0 0%, #b8a3d1 25%, #7fb3e8 50%, #6dd5ed 75%, #88e5a8 100%);
            background-size: 400% 400%;
            animation: gradientShift 12s ease infinite;
            overflow: hidden;
            position: relative;
        }
        
        @keyframes gradientShift {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        
        /* 增强的动态背景 */
        .bg-animation {
            position: absolute;
            width: 100%;
            height: 100%;
            overflow: hidden;
            z-index: 1;
        }
        
        .bg-animation::before {
            content: '';
            position: absolute;
            width: 300%;
            height: 300%;
            background: 
                radial-gradient(circle at 25% 25%, rgba(255,255,255,0.1) 0%, transparent 50%),
                radial-gradient(circle at 75% 75%, rgba(255,255,255,0.08) 0%, transparent 50%);
            animation: bgFloat 18s linear infinite;
            transform-origin: center;
        }
        
        .bg-animation::after {
            content: '';
            position: absolute;
            width: 200%;
            height: 200%;
            background: linear-gradient(
                45deg,
                transparent 30%,
                rgba(255,255,255,0.05) 50%,
                transparent 70%
            );
            animation: bgSweep 25s linear infinite;
            transform-origin: center;
        }
        
        @keyframes bgFloat {
            0% { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
            50% { transform: translate(-50%, -50%) rotate(180deg) scale(1.1); }
            100% { transform: translate(-50%, -50%) rotate(360deg) scale(1); }
        }
        
        @keyframes bgSweep {
            0% { transform: translate(-50%, -50%) rotate(0deg); }
            100% { transform: translate(-50%, -50%) rotate(360deg); }
        }
        
        /* 增强的浮动装饰元素 */
        .floating-shapes {
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: 2;
            pointer-events: none;
        }
        
        .shape {
            position: absolute;
            opacity: 0.7;
            animation: complexFloat 10s ease-in-out infinite;
            border-radius: 50%;
        }
        
        .shape:nth-child(1) {
            width: 120px;
            height: 120px;
            background: linear-gradient(135deg, #7fb3e8 0%, #6dd5ed 100%);
            top: 15%;
            left: 8%;
            animation-delay: 0s;
            animation-duration: 15s;
        }
        
        .shape:nth-child(2) {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, #88e5a8 0%, #7dd3c0 100%);
            top: 65%;
            right: 12%;
            animation-delay: 3s;
            animation-duration: 12s;
            border-radius: 20px;
        }
        
        .shape:nth-child(3) {
            width: 150px;
            height: 150px;
            background: linear-gradient(135deg, #a8b5f0 0%, #b8a3d1 100%);
            bottom: 25%;
            left: 10%;
            animation-delay: 6s;
            animation-duration: 18s;
            border-radius: 30px;
        }
        
        .shape:nth-child(4) {
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, #f5d7a8 0%, #f2c078 100%);
            top: 25%;
            right: 25%;
            animation-delay: 2s;
            animation-duration: 11s;
        }
        
        .shape:nth-child(5) {
            width: 100px;
            height: 100px;
            background: linear-gradient(135deg, #d4c5f9 0%, #f8d7da 100%);
            bottom: 15%;
            right: 35%;
            animation-delay: 4s;
            animation-duration: 14s;
            border-radius: 25px;
        }
        
        .shape:nth-child(6) {
            width: 40px;
            height: 40px;
            background: linear-gradient(135deg, #e8c5e8 0%, #f9f7d7 100%);
            top: 40%;
            left: 25%;
            animation-delay: 8s;
            animation-duration: 9s;
        }
        
        @keyframes complexFloat {
            0% { 
                transform: translateY(0px) translateX(0px) rotate(0deg) scale(1);
                opacity: 0.7;
            }
            25% { 
                transform: translateY(-30px) translateX(15px) rotate(90deg) scale(1.1);
                opacity: 0.5;
            }
            50% { 
                transform: translateY(-10px) translateX(-20px) rotate(180deg) scale(0.9);
                opacity: 0.8;
            }
            75% { 
                transform: translateY(20px) translateX(10px) rotate(270deg) scale(1.05);
                opacity: 0.6;
            }
            100% { 
                transform: translateY(0px) translateX(0px) rotate(360deg) scale(1);
                opacity: 0.7;
            }
        }
        
        /* 主容器 */
        .main-container {
            position: relative;
            z-index: 10;
            display: flex;
            align-items: center;
            gap: 100px;
            max-width: 1400px;
            width: 90%;
            animation: containerSlideIn 1s ease-out;
        }
        
        @keyframes containerSlideIn {
            0% {
                opacity: 0;
                transform: translateY(50px);
            }
            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        /* 左侧信息区域 */
        .info-section {
            flex: 1;
            color: white;
            text-align: left;
            animation: fadeInLeft 1.2s ease-out 0.3s both;
        }
        
        @keyframes fadeInLeft {
            0% {
                opacity: 0;
                transform: translateX(-50px);
            }
            100% {
                opacity: 1;
                transform: translateX(0);
            }
        }
        
        .logo-area {
            margin-bottom: 50px;
        }
        
        .logo {
            width: 100px;
            height: 100px;
            background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
            border-radius: 25px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 48px;
            color: #7fb3e8;
            margin-bottom: 25px;
            box-shadow: 
                0 20px 40px rgba(0,0,0,0.15),
                0 0 0 1px rgba(255,255,255,0.1);
            animation: logoFloat 4s ease-in-out infinite;
            position: relative;
            overflow: hidden;
        }
        
        .logo::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(45deg, transparent, rgba(255,255,255,0.3), transparent);
            transform: rotate(45deg);
            animation: logoShine 3s linear infinite;
        }
        
        @keyframes logoFloat {
            0%, 100% { 
                transform: translateY(0px) rotate(0deg); 
                box-shadow: 0 20px 40px rgba(0,0,0,0.15), 0 0 0 1px rgba(255,255,255,0.1);
            }
            50% { 
                transform: translateY(-15px) rotate(5deg); 
                box-shadow: 0 30px 50px rgba(0,0,0,0.2), 0 0 0 1px rgba(255,255,255,0.15);
            }
        }
        
        @keyframes logoShine {
            0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
            100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
        }
        
        .system-title {
            font-size: 48px;
            font-weight: 800;
            margin-bottom: 20px;
            background: linear-gradient(135deg, #fff 0%, #e3f2fd 50%, #bbdefb 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-shadow: 0 4px 8px rgba(0,0,0,0.1);
            animation: titleGlow 3s ease-in-out infinite alternate;
        }
        
        @keyframes titleGlow {
            0% { filter: brightness(1) drop-shadow(0 0 5px rgba(255,255,255,0.3)); }
            100% { filter: brightness(1.1) drop-shadow(0 0 15px rgba(255,255,255,0.5)); }
        }
        
        .system-subtitle {
            font-size: 20px;
            opacity: 0.95;
            margin-bottom: 40px;
            line-height: 1.8;
            text-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        .features {
            list-style: none;
        }
        
        .features li {
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            font-size: 18px;
            opacity: 0.9;
            transition: all 0.3s ease;
            animation: fadeInUp 0.8s ease-out both;
        }
        
        .features li:nth-child(1) { animation-delay: 0.5s; }
        .features li:nth-child(2) { animation-delay: 0.7s; }
        .features li:nth-child(3) { animation-delay: 0.9s; }
        .features li:nth-child(4) { animation-delay: 1.1s; }
        .features li:nth-child(5) { animation-delay: 1.3s; }
        
        @keyframes fadeInUp {
            0% {
                opacity: 0;
                transform: translateY(20px);
            }
            100% {
                opacity: 0.9;
                transform: translateY(0);
            }
        }
        
        .features li:hover {
            opacity: 1;
            transform: translateX(10px);
        }
        
        .features li::before {
            content: '✓';
            display: inline-block;
            width: 28px;
            height: 28px;
            background: linear-gradient(135deg, #7fb3e8 0%, #6dd5ed 100%);
            border-radius: 50%;
            text-align: center;
            line-height: 28px;
            margin-right: 20px;
            color: white;
            font-size: 14px;
            font-weight: bold;
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
            animation: iconPulse 2s ease-in-out infinite;
        }
        
        @keyframes iconPulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.05); }
        }
        
        /* 右侧登录区域 */
        .login-section {
            flex: 0 0 480px;
            animation: fadeInRight 1.2s ease-out 0.5s both;
        }
        
        @keyframes fadeInRight {
            0% {
                opacity: 0;
                transform: translateX(50px);
            }
            100% {
                opacity: 1;
                transform: translateX(0);
            }
        }
        
        .login-card {
            background: rgba(255, 255, 255, 0.98);
            backdrop-filter: blur(25px);
            border-radius: 25px;
            padding: 50px;
            box-shadow: 
                0 25px 50px rgba(0, 0, 0, 0.15),
                0 0 0 1px rgba(255, 255, 255, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.3);
            border: 1px solid rgba(255, 255, 255, 0.18);
            position: relative;
            overflow: hidden;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        .login-card:hover {
            transform: translateY(-5px);
            box-shadow: 
                0 35px 70px rgba(0, 0, 0, 0.2),
                0 0 0 1px rgba(255, 255, 255, 0.25),
                inset 0 1px 0 rgba(255, 255, 255, 0.4);
        }
        
        .login-card::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(45deg, transparent, rgba(79, 172, 254, 0.1), transparent);
            transform: rotate(45deg);
            animation: cardShine 4s linear infinite;
        }
        
        @keyframes cardShine {
            0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
            100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
        }
        
        .card-header {
            text-align: center;
            margin-bottom: 40px;
            position: relative;
            z-index: 2;
        }
        
        .card-title {
            font-size: 32px;
            font-weight: 700;
            color: #2c3e50;
            margin-bottom: 12px;
            background: linear-gradient(135deg, #7fb3e8 0%, #6dd5ed 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .card-subtitle {
            color: #7f8c8d;
            font-size: 16px;
            font-weight: 400;
        }
        
        .form-container {
            position: relative;
            z-index: 2;
        }
        
        .form-group {
            margin-bottom: 30px;
            position: relative;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 10px;
            font-size: 15px;
            font-weight: 600;
            color: #34495e;
        }
        
        .input-wrapper {
            position: relative;
        }
        
        .form-group input {
            width: 100%;
            padding: 18px 55px 18px 20px;
            border: 2px solid #e9ecef;
            border-radius: 15px;
            font-size: 16px;
            transition: all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
            background: #f8f9fa;
            color: #2c3e50;
        }
        
        .form-group input:focus {
            border-color: #7fb3e8;
            background: white;
            box-shadow: 
                0 0 0 4px rgba(127, 179, 232, 0.1),
                0 8px 16px rgba(127, 179, 232, 0.1);
            outline: none;
            transform: translateY(-2px);
        }
        
        .input-icon {
            position: absolute;
            right: 20px;
            top: 50%;
            transform: translateY(-50%);
            color: #bdc3c7;
            font-size: 20px;
            transition: all 0.3s ease;
        }
        
        .form-group input:focus + .input-icon {
            color: #7fb3e8;
            animation: iconBounce 0.6s ease;
        }
        
        @keyframes iconBounce {
            0%, 100% { transform: translateY(-50%) scale(1); }
            50% { transform: translateY(-50%) scale(1.2); }
        }
        
        .login-btn {
            width: 100%;
            padding: 18px;
            background: linear-gradient(135deg, #7fb3e8 0%, #6dd5ed 50%, #88e5a8 100%);
            color: white;
            border: none;
            border-radius: 15px;
            font-size: 18px;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
            margin-bottom: 25px;
            position: relative;
            overflow: hidden;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        
        .login-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
            transition: all 0.6s;
        }
        
        .login-btn:hover::before {
            left: 100%;
        }
        
        .login-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 15px 30px rgba(127, 179, 232, 0.4);
            background: linear-gradient(135deg, #6dd5ed 0%, #7fb3e8 50%, #7dd3c0 100%);
        }
        
        .login-btn:active {
            transform: translateY(-1px);
        }
        
        .form-links {
            display: flex;
            justify-content: space-between;
            margin-top: 25px;
        }
        
        .form-links a {
            color: #7fb3e8;
            text-decoration: none;
            font-size: 15px;
            font-weight: 500;
            transition: all 0.3s ease;
            position: relative;
            padding: 5px 0;
        }
        
        .form-links a::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: 0;
            left: 0;
            background: linear-gradient(135deg, #7fb3e8, #6dd5ed);
            transition: width 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
        }
        
        .form-links a:hover::after {
            width: 100%;
        }
        
        .form-links a:hover {
            color: #6dd5ed;
            transform: translateY(-1px);
        }
        
        /* 优化的模态框样式 */
        .modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            backdrop-filter: blur(10px);
            z-index: 1000;
            opacity: 0;
            transition: all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
        }
        
        .modal-overlay.active {
            opacity: 1;
        }
        
        .modal {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0.8);
            background: white;
            border-radius: 25px;
            padding: 50px;
            width: 90%;
            max-width: 500px;
            box-shadow: 
                0 30px 60px rgba(0, 0, 0, 0.2),
                0 0 0 1px rgba(255, 255, 255, 0.1);
            z-index: 1001;
            opacity: 0;
            transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        
        .modal.active {
            transform: translate(-50%, -50%) scale(1);
            opacity: 1;
        }
        
        .modal-header {
            text-align: center;
            margin-bottom: 35px;
        }
        
        .modal-title {
            font-size: 28px;
            font-weight: 700;
            color: #2c3e50;
            margin-bottom: 10px;
            background: linear-gradient(135deg, #7fb3e8 0%, #6dd5ed 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .modal-subtitle {
            color: #7f8c8d;
            font-size: 16px;
            line-height: 1.5;
        }
        
        .captcha-group {
            display: flex;
            gap: 15px;
            align-items: flex-end;
        }
        
        .captcha-input {
            flex: 1;
        }
        
        .captcha-display {
            width: 140px;
            height: 55px;
            background: linear-gradient(135deg, #f1f2f6 0%, #dfe4ea 100%);
            border: 2px solid #e9ecef;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            font-weight: bold;
            color: #2c3e50;
            cursor: pointer;
            transition: all 0.3s ease;
            user-select: none;
            letter-spacing: 4px;
            position: relative;
            overflow: hidden;
        }
        
        .captcha-display::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
            transition: all 0.5s;
        }
        
        .captcha-display:hover {
            background: linear-gradient(135deg, #dfe4ea 0%, #c8d6e5 100%);
            transform: scale(1.05);
            box-shadow: 0 8px 16px rgba(0,0,0,0.1);
        }
        
        .captcha-display:hover::before {
            left: 100%;
        }
        
        .modal-buttons {
            display: flex;
            gap: 20px;
            margin-top: 35px;
        }
        
        .btn {
            flex: 1;
            padding: 15px 25px;
            border: none;
            border-radius: 12px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        
        .btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
            transition: all 0.5s;
        }
        
        .btn:hover::before {
            left: 100%;
        }
        
        .btn-secondary {
            background: linear-gradient(135deg, #f1f2f6 0%, #dfe4ea 100%);
            color: #2c3e50;
            border: 1px solid #e9ecef;
        }
        
        .btn-secondary:hover {
            background: linear-gradient(135deg, #dfe4ea 0%, #c8d6e5 100%);
            transform: translateY(-2px);
            box-shadow: 0 8px 16px rgba(0,0,0,0.1);
        }
        
        .btn-primary {
            background: linear-gradient(135deg, #7fb3e8 0%, #6dd5ed 50%, #88e5a8 100%);
            color: white;
        }
        
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 24px rgba(127, 179, 232, 0.3);
            background: linear-gradient(135deg, #6dd5ed 0%, #7fb3e8 50%, #7dd3c0 100%);
        }
        
        /* 消息提示框完全重新设计 - 非透明清晰版本 */
        .message {
            position: fixed;
            top: 20px;
            left: 50%;
            transform: translateX(-50%) translateY(-100px);
            padding: 16px 24px;
            border-radius: 8px;
            font-size: 15px;
            font-weight: 600;
            z-index: 9999;
            opacity: 0;
            transition: all 0.3s ease-in-out;
            max-width: 500px;
            min-width: 300px;
            text-align: center;
            /* 完全不透明的背景 */
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            border: 1px solid #ddd;
            /* 移除所有透明和模糊效果 */
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
        }
        
        .message.show {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }
        
        /* 成功消息 - 绿色背景白色文字 */
        .message.success {
            background-color: #28a745;
            color: #ffffff;
            border-color: #1e7e34;
        }
        
        /* 错误消息 - 红色背景白色文字 */
        .message.error {
            background-color: #dc3545;
            color: #ffffff;
            border-color: #bd2130;
        }
        
        /* 信息消息 - 蓝色背景白色文字 */
        .message.info {
            background-color: #007bff;
            color: #ffffff;
            border-color: #0056b3;
        }
        
        /* 警告消息 - 橙色背景白色文字 */
        .message.warning {
            background-color: #fd7e14;
            color: #ffffff;
            border-color: #e55a00;
        }
        
        /* 默认消息 - 白色背景黑色文字 */
        .message:not(.success):not(.error):not(.info):not(.warning) {
            background-color: #ffffff;
            color: #333333;
            border-color: #dee2e6;
        }
        
        /* 消息图标 */
        .message::before {
            content: '';
            display: inline-block;
            width: 16px;
            height: 16px;
            margin-right: 8px;
            vertical-align: middle;
        }
        
        .message.success::before {
            content: '✓';
            color: #ffffff;
            font-weight: bold;
            font-size: 14px;
        }
        
        .message.error::before {
            content: '✕';
            color: #ffffff;
            font-weight: bold;
            font-size: 14px;
        }
        
        .message.info::before {
            content: 'i';
            color: #ffffff;
            font-weight: bold;
            font-size: 14px;
            font-family: serif;
        }
        
        .message.warning::before {
            content: '!';
            color: #ffffff;
            font-weight: bold;
            font-size: 14px;
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .message {
                max-width: calc(100vw - 40px);
                min-width: 280px;
                margin: 0 20px;
                font-size: 14px;
                padding: 14px 20px;
                top: 15px;
            }
        }
        
        /* 悬停效果 */
        .message:hover {
            cursor: pointer;
            transform: translateX(-50%) translateY(-2px);
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
        }
        
        /* 响应式设计 */
        @media (max-width: 1024px) {
            .main-container {
                gap: 50px;
            }
        }
        
        @media (max-width: 768px) {
            .main-container {
                flex-direction: column;
                gap: 40px;
                padding: 20px;
            }
            
            .info-section {
                text-align: center;
            }
            
            .system-title {
                font-size: 36px;
            }
            
            .login-section {
                flex: none;
                width: 100%;
                max-width: 450px;
            }
            
            .login-card {
                padding: 40px 30px;
            }
            
            .floating-shapes {
                display: none;
            }
            
            .message {
                max-width: 90%;
                margin: 0 5%;
            }
        }
        
        /* 输入框聚焦状态 */
        .form-group.focused input {
            border-color: #7fb3e8;
            box-shadow: 0 0 0 4px rgba(127, 179, 232, 0.1);
        }
        
        /* 加载动画 */
        .loading {
            position: relative;
            pointer-events: none;
        }
        
        .loading::after {
            content: '';
            position: absolute;
            width: 24px;
            height: 24px;
            margin: auto;
            border: 3px solid transparent;
            border-top-color: #ffffff;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        /* 页面加载动画 */
        body.loaded .main-container {
            animation: none;
        }
        
        body.loaded .info-section {
            animation: none;
        }
        
        body.loaded .login-section {
            animation: none;
        }
        
        /* 输入框聚焦状态 */
        .form-group.focused input {
            border-color: #7fb3e8;
            box-shadow: 0 0 0 4px rgba(127, 179, 232, 0.1);
        }
        
        /* 按钮点击效果 */
        .btn:active {
            transform: translateY(0) scale(0.98);
        }
        
        .login-btn:active {
            transform: translateY(0) scale(0.98);
        }
        
        /* 成功状态样式 */
        .success-state {
            background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%) !important;
            animation: successPulse 0.6s ease-out;
        }
        
        @keyframes successPulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }
        
        /* 错误状态样式 */
        .error-state {
            background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%) !important;
            animation: errorShake 0.6s ease-out;
        }
        
        @keyframes errorShake {
            0%, 100% { transform: translateX(0); }
            25% { transform: translateX(-5px); }
            75% { transform: translateX(5px); }
        }
        
        /* 输入验证样式 */
        .form-group input.valid {
            border-color: #27ae60;
            background-color: rgba(46, 204, 113, 0.1);
        }
        
        .form-group input.invalid {
            border-color: #e74c3c;
            background-color: rgba(231, 76, 60, 0.1);
        }
    </style>
</head>
<body>
    <!-- 动态背景 -->
    <div class="bg-animation"></div>
    
    <!-- 浮动装饰 -->
    <div class="floating-shapes">
        <div class="shape"></div>
        <div class="shape"></div>
        <div class="shape"></div>
        <div class="shape"></div>
        <div class="shape"></div>
        <div class="shape"></div>
    </div>
    
    <div class="main-container">
        <!-- 左侧信息区域 -->
        <div class="info-section">
            <div class="logo-area">
                <div class="logo">📇</div>
                <h1 class="system-title">名片册系统</h1>
                <p class="system-subtitle">专业的商务名片管理平台，让您的人脉管理更加高效便捷</p>
            </div>
            
            <ul class="features">
                <li>智能名片分类管理</li>
                <li>快速搜索和筛选功能</li>
                <li>安全可靠的数据存储</li>
                <li>多端同步云端访问</li>
                <li>个性化定制专属服务</li>
            </ul>
        </div>
        
        <!-- 右侧登录区域 -->
        <div class="login-section">
            <div class="login-card">
                <div class="card-header">
                    <h2 class="card-title">欢迎回来</h2>
                    <p class="card-subtitle">请登录您的账户继续使用</p>
                </div>
                
                <form class="form-container" id="loginForm">
                    <div class="form-group">
                        <label for="username">用户名</label>
                        <div class="input-wrapper">
                            <input type="text" id="username" name="username" placeholder="请输入您的用户名" required>
                            <span class="input-icon">👤</span>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label for="password">密码</label>
                        <div class="input-wrapper">
                            <input type="password" id="password" name="password" placeholder="请输入您的密码" required>
                            <span class="input-icon">🔒</span>
                        </div>
                    </div>
                    
                    <button type="submit" class="login-btn" id="loginBtn">
                        <span>立即登录</span>
                    </button>
                    
                    <div class="form-links">
                        <a href="#" id="registerLink">注册新账户</a>
                        <a href="#" id="forgotLink">忘记密码？</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
    
    <!-- 注册模态框 -->
    <div class="modal-overlay" id="registerOverlay">
        <div class="modal" id="registerModal">
            <div class="modal-header">
                <h3 class="modal-title">注册新账户</h3>
                <p class="modal-subtitle">创建您的专属名片册账户</p>
            </div>
            
            <form id="registerForm">
                <div class="form-group">
                    <label for="regUsername">用户名</label>
                    <input type="text" id="regUsername" name="username" placeholder="请输入用户名（3-20位字符）" required>
                </div>
                
                <div class="form-group">
                    <label for="regPassword">密码</label>
                    <input type="password" id="regPassword" name="password" placeholder="请输入密码（至少6位）" required>
                </div>
                
                <div class="form-group">
                    <label for="regConfirmPassword">确认密码</label>
                    <input type="password" id="regConfirmPassword" name="confirmPassword" placeholder="请再次输入密码" required>
                </div>
                
                <div class="form-group">
                    <label for="regEmail">邮箱地址</label>
                    <input type="email" id="regEmail" name="email" placeholder="请输入有效的邮箱地址" required>
                </div>
                
                <div class="form-group">
                    <label for="regCaptcha">验证码</label>
                    <div class="captcha-group">
                        <div class="captcha-input">
                            <input type="text" id="regCaptcha" name="captcha" placeholder="请输入验证码" required>
                        </div>
                        <div class="captcha-display" id="captchaDisplay" title="点击刷新验证码">——</div>
                    </div>
                </div>
                
                <div class="modal-buttons">
                    <button type="button" class="btn btn-secondary" id="cancelRegister">取消</button>
                    <button type="submit" class="btn btn-primary" id="confirmRegister">注册账户</button>
                </div>
            </form>
        </div>
    </div>
    
    <!-- 忘记密码模态框 -->
    <div class="modal-overlay" id="forgotOverlay">
        <div class="modal" id="forgotModal">
            <div class="modal-header">
                <h3 class="modal-title">找回密码</h3>
                <p class="modal-subtitle">我们将向您的邮箱发送密码重置链接</p>
            </div>
            
            <form id="forgotForm">
                <div class="form-group">
                    <label for="forgotEmail">邮箱地址</label>
                    <input type="email" id="forgotEmail" name="email" placeholder="请输入注册时使用的邮箱地址" required>
                </div>
                
                <div class="modal-buttons">
                    <button type="button" class="btn btn-secondary" id="cancelForgot">取消</button>
                    <button type="submit" class="btn btn-primary" id="confirmForgot">发送重置邮件</button>
                </div>
            </form>
        </div>
    </div>
    
    <!-- 修改密码模态框 -->
    <div class="modal-overlay" id="changePasswordOverlay">
        <div class="modal" id="changePasswordModal">
            <div class="modal-header">
                <h3 class="modal-title">更改密码</h3>
                <p class="modal-subtitle">检测到您使用的是临时密码，请立即更改为新密码</p>
            </div>
            
            <form id="changePasswordForm">
                <div class="form-group">
                    <label for="currentUsername">用户名</label>
                    <input type="text" id="currentUsername" name="username" disabled>
                </div>
                
                <div class="form-group">
                    <label for="newPassword">新密码</label>
                    <input type="password" id="newPassword" name="newPassword" placeholder="请输入新密码（至少6位）" required>
                </div>
                
                <div class="form-group">
                    <label for="confirmNewPassword">确认新密码</label>
                    <input type="password" id="confirmNewPassword" name="confirmNewPassword" placeholder="请再次输入新密码" required>
                </div>
                
                <div class="modal-buttons">
                    <button type="button" class="btn btn-secondary" id="cancelChangePassword">稍后修改</button>
                    <button type="submit" class="btn btn-primary" id="confirmChangePassword">立即更改</button>
                </div>
            </form>
        </div>
    </div>
    
    <!-- 消息提示 -->
    <div class="message" id="message"></div>
    
    <script>
        // 全局变量
        const ctx = '<%=request.getContextPath()%>';
        let captchaValue = '';
        
        // DOM 元素
        const loginForm = document.getElementById('loginForm');
        const loginBtn = document.getElementById('loginBtn');
        const registerLink = document.getElementById('registerLink');
        const forgotLink = document.getElementById('forgotLink');
        
        // 模态框
        const registerOverlay = document.getElementById('registerOverlay');
        const registerModal = document.getElementById('registerModal');
        const forgotOverlay = document.getElementById('forgotOverlay');
        const forgotModal = document.getElementById('forgotModal');
        const changePasswordOverlay = document.getElementById('changePasswordOverlay');
        const changePasswordModal = document.getElementById('changePasswordModal');
        
        // 验证码
        const captchaDisplay = document.getElementById('captchaDisplay');
        
        // 消息提示
        const message = document.getElementById('message');
        
        // 初始化
        document.addEventListener('DOMContentLoaded', function() {
            generateCaptcha();
            bindEvents();
            initAnimations();
        });
        
        // 初始化动画
        function initAnimations() {
            // 页面加载完成标记
            setTimeout(() => {
                document.body.classList.add('loaded');
            }, 2000);
        }
        
        // 生成验证码
        function generateCaptcha() {
            const chars = 'ABCDEFGHJKLMNPQRSTUVWXYZ23456789'; // 排除易混淆字符
            let result = '';
            for (let i = 0; i < 5; i++) {
                result += chars.charAt(Math.floor(Math.random() * chars.length));
            }
            captchaValue = result;
            captchaDisplay.textContent = result;
        }
        
        // 显示消息
        function showMessage(text, type = 'info', duration = 5000) {
            message.textContent = text;
            message.className = `message ${type}`;
            message.classList.add('show');
            
            // 自动隐藏
            setTimeout(() => {
                message.classList.remove('show');
            }, duration);
            
            // 点击消息可手动关闭
            message.onclick = () => message.classList.remove('show');
        }
        
        // 显示模态框
        function showModal(overlay, modal) {
            overlay.style.display = 'block';
            document.body.style.overflow = 'hidden'; // 防止背景滚动
            setTimeout(() => {
                overlay.classList.add('active');
                modal.classList.add('active');
            }, 10);
        }
        
        // 隐藏模态框
        function hideModal(overlay, modal) {
            overlay.classList.remove('active');
            modal.classList.remove('active');
            setTimeout(() => {
                overlay.style.display = 'none';
                document.body.style.overflow = 'auto'; // 恢复滚动
            }, 400);
        }
        
        // 绑定事件
        function bindEvents() {
            // 登录表单提交
            loginForm.addEventListener('submit', handleLogin);
            
            // 显示注册模态框
            registerLink.addEventListener('click', (e) => {
                e.preventDefault();
                showModal(registerOverlay, registerModal);
                generateCaptcha();
            });
            
            // 显示忘记密码模态框
            forgotLink.addEventListener('click', (e) => {
                e.preventDefault();
                showModal(forgotOverlay, forgotModal);
            });
            
            // 验证码点击刷新
            captchaDisplay.addEventListener('click', generateCaptcha);
            
            // 注册相关事件
            document.getElementById('cancelRegister').addEventListener('click', () => {
                hideModal(registerOverlay, registerModal);
                clearForm('registerForm');
            });
            
            document.getElementById('registerForm').addEventListener('submit', handleRegister);
            
            // 忘记密码相关事件
            document.getElementById('cancelForgot').addEventListener('click', () => {
                hideModal(forgotOverlay, forgotModal);
                clearForm('forgotForm');
            });
            
            document.getElementById('forgotForm').addEventListener('submit', handleForgotPassword);
            
            // 修改密码相关事件
            document.getElementById('cancelChangePassword').addEventListener('click', () => {
                hideModal(changePasswordOverlay, changePasswordModal);
            });
            
            document.getElementById('changePasswordForm').addEventListener('submit', handleChangePassword);
            
            // 点击遮罩关闭模态框
            registerOverlay.addEventListener('click', (e) => {
                if (e.target === registerOverlay) {
                    hideModal(registerOverlay, registerModal);
                }
            });
            
            forgotOverlay.addEventListener('click', (e) => {
                if (e.target === forgotOverlay) {
                    hideModal(forgotOverlay, forgotModal);
                }
            });
            
            changePasswordOverlay.addEventListener('click', (e) => {
                if (e.target === changePasswordOverlay) {
                    hideModal(changePasswordOverlay, changePasswordModal);
                }
            });
            
            // 输入框焦点事件
            bindInputEvents();
        }
        
        // 绑定输入框事件
        function bindInputEvents() {
            document.querySelectorAll('input').forEach(input => {
                input.addEventListener('focus', function() {
                    this.closest('.form-group').classList.add('focused');
                });
                
                input.addEventListener('blur', function() {
                    this.closest('.form-group').classList.remove('focused');
                });
                
                // 实时验证
                input.addEventListener('input', function() {
                    validateInput(this);
                });
            });
        }
        
        // 输入验证
        function validateInput(input) {
            const value = input.value.trim();
            const type = input.type;
            const name = input.name;
            
            // 移除之前的验证状态
            input.classList.remove('valid', 'invalid');
            
            if (value === '') return;
            
            let isValid = true;
            
            switch (name) {
                case 'username':
                    isValid = value.length >= 3 && value.length <= 20;
                    break;
                case 'password':
                case 'newPassword':
                    isValid = value.length >= 6;
                    break;
                case 'email':
                    isValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
                    break;
                case 'confirmPassword':
                case 'confirmNewPassword':
                    const passwordField = name === 'confirmPassword' ? 
                        document.getElementById('regPassword') : 
                        document.getElementById('newPassword');
                    isValid = value === passwordField.value;
                    break;
            }
            
            input.classList.add(isValid ? 'valid' : 'invalid');
        }
        
        // 清空表单
        function clearForm(formId) {
            const form = document.getElementById(formId);
            form.reset();
            form.querySelectorAll('input').forEach(input => {
                input.classList.remove('valid', 'invalid');
                input.closest('.form-group').classList.remove('focused');
            });
        }
        
        // 设置按钮状态
        function setButtonState(button, loading = false, text = '') {
            if (loading) {
                button.classList.add('loading');
                button.disabled = true;
                if (text) {
                    const span = button.querySelector('span');
                    if (span) span.textContent = text;
                    else button.textContent = text;
                }
            } else {
                button.classList.remove('loading');
                button.disabled = false;
                if (text) {
                    const span = button.querySelector('span');
                    if (span) span.textContent = text;
                    else button.textContent = text;
                }
            }
        }
        
        // 处理登录
        async function handleLogin(e) {
            e.preventDefault();
            
            const username = document.getElementById('username').value.trim();
            const password = document.getElementById('password').value;
            
            if (!username || !password) {
                showMessage('请填写完整的登录信息', 'error');
                return;
            }
            
            // 显示加载状态
            setButtonState(loginBtn, true, '登录中...');
            loginBtn.classList.remove('error-state');
            
            try {
                const response = await fetch(ctx + '/LoginServlet', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                    },
                    body: new URLSearchParams({
                        username: username,
                        password: password
                    })
                });
                
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                
                const data = await response.json();
                
                if (data.success) {
                    loginBtn.classList.add('success-state');
                    setButtonState(loginBtn, false, '登录成功');
                    
                    if (data.requireChangePassword) {
                        // 需要修改密码
                        document.getElementById('currentUsername').value = username;
                        showModal(changePasswordOverlay, changePasswordModal);
                        showMessage('检测到临时密码，请立即更改', 'warning', 5000);
                    } else {
                        // 登录成功
                        showMessage('🎉 登录成功，正在跳转...', 'success');
                        setTimeout(() => {
                            window.location.href = ctx + '/Main.jsp?username=' + encodeURIComponent(username);
                        }, 1500);
                    }
                } else {
                    loginBtn.classList.add('error-state');
                    showMessage(data.message || '登录失败，请检查用户名和密码', 'error');
                }
            } catch (error) {
                console.error('登录请求失败:', error);
                loginBtn.classList.add('error-state');
                showMessage('网络连接异常，请检查网络后重试', 'error');
            } finally {
                // 恢复按钮状态
                setTimeout(() => {
                    setButtonState(loginBtn, false, '立即登录');
                    loginBtn.classList.remove('success-state', 'error-state');
                }, 2000);
            }
        }
        
        // 处理注册
        async function handleRegister(e) {
            e.preventDefault();
            
            const username = document.getElementById('regUsername').value.trim();
            const password = document.getElementById('regPassword').value;
            const confirmPassword = document.getElementById('regConfirmPassword').value;
            const email = document.getElementById('regEmail').value.trim();
            const captcha = document.getElementById('regCaptcha').value.trim();
            
            // 表单验证
            if (!username || !password || !confirmPassword || !email || !captcha) {
                showMessage('请填写完整的注册信息', 'error');
                return;
            }
            
            if (username.length < 3 || username.length > 20) {
                showMessage('用户名长度应在3-20位之间', 'error');
                return;
            }
            
            if (password !== confirmPassword) {
                showMessage('两次输入的密码不一致', 'error');
                return;
            }
            
            if (password.length < 6) {
                showMessage('密码长度至少需要6位', 'error');
                return;
            }
            
            // 邮箱格式验证
            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            if (!emailRegex.test(email)) {
                showMessage('请输入有效的邮箱地址', 'error');
                return;
            }
            
            if (captcha.toUpperCase() !== captchaValue.toUpperCase()) {
                showMessage('验证码错误，请重新输入', 'error');
                generateCaptcha();
                document.getElementById('regCaptcha').value = '';
                return;
            }
            
            const submitBtn = document.getElementById('confirmRegister');
            setButtonState(submitBtn, true, '注册中...');
            
            try {
                const response = await fetch(ctx + '/RegisterServlet', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                    },
                    body: new URLSearchParams({
                        username: username,
                        password: password,
                        email: email
                    })
                });
                
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                
                const data = await response.json();
                
                if (data.success) {
                    submitBtn.classList.add('success-state');
                    hideModal(registerOverlay, registerModal);
                    showMessage('🎉 注册成功！请使用新账户登录', 'success', 5000);
                    // 自动填充用户名
                    document.getElementById('username').value = username;
                    document.getElementById('password').focus();
                    clearForm('registerForm');
                } else {
                    submitBtn.classList.add('error-state');
                    showMessage(data.message || '注册失败，请重试', 'error');
                    generateCaptcha();
                    document.getElementById('regCaptcha').value = '';
                }
            } catch (error) {
                console.error('注册请求失败:', error);
                submitBtn.classList.add('error-state');
                showMessage('网络连接异常，请检查网络后重试', 'error');
                generateCaptcha();
                document.getElementById('regCaptcha').value = '';
            } finally {
                setTimeout(() => {
                    setButtonState(submitBtn, false, '注册账户');
                    submitBtn.classList.remove('success-state', 'error-state');
                }, 2000);
            }
        }
        
        // 处理忘记密码
        async function handleForgotPassword(e) {
            e.preventDefault();
            
            const email = document.getElementById('forgotEmail').value.trim();
            
            if (!email) {
                showMessage('请输入邮箱地址', 'error');
                return;
            }
            
            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            if (!emailRegex.test(email)) {
                showMessage('请输入有效的邮箱地址', 'error');
                return;
            }
            
            const submitBtn = document.getElementById('confirmForgot');
            setButtonState(submitBtn, true, '发送中...');
            
            try {
                const response = await fetch(ctx + '/ResetPasswordServlet', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                    },
                    body: new URLSearchParams({
                        email: email
                    })
                });
                
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                
                const data = await response.json();
                
                if (data.success) {
                    submitBtn.classList.add('success-state');
                    hideModal(forgotOverlay, forgotModal);
                    showMessage('📧 重置邮件已发送，请查收邮箱', 'success', 6000);
                    clearForm('forgotForm');
                } else {
                    submitBtn.classList.add('error-state');
                    showMessage(data.message || '发送失败，请检查邮箱地址', 'error');
                }
            } catch (error) {
                console.error('重置密码请求失败:', error);
                submitBtn.classList.add('error-state');
                showMessage('网络连接异常，请检查网络后重试', 'error');
            } finally {
                setTimeout(() => {
                    setButtonState(submitBtn, false, '发送重置邮件');
                    submitBtn.classList.remove('success-state', 'error-state');
                }, 2000);
            }
        }
        
        // 处理修改密码
        async function handleChangePassword(e) {
            e.preventDefault();
            
            const username = document.getElementById('currentUsername').value;
            const newPassword = document.getElementById('newPassword').value;
            const confirmNewPassword = document.getElementById('confirmNewPassword').value;
            
            if (!newPassword || !confirmNewPassword) {
                showMessage('请填写完整的密码信息', 'error');
                return;
            }
            
            if (newPassword !== confirmNewPassword) {
                showMessage('两次输入的新密码不一致', 'error');
                return;
            }
            
            if (newPassword.length < 6) {
                showMessage('新密码长度至少需要6位', 'error');
                return;
            }
            
            const submitBtn = document.getElementById('confirmChangePassword');
            setButtonState(submitBtn, true, '更改中...');
            
            try {
                const response = await fetch(ctx + '/ChangePasswordServlet', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                    },
                    body: new URLSearchParams({
                        username: username,
                        newPassword: newPassword
                    })
                });
                
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                
                const data = await response.json();
                
                if (data.success) {
                    submitBtn.classList.add('success-state');
                    hideModal(changePasswordOverlay, changePasswordModal);
                    showMessage('🔒 密码修改成功！正在跳转...', 'success');
                    setTimeout(() => {
                        window.location.href = ctx + '/Main.jsp?username=' + encodeURIComponent(username);
                    }, 2000);
                } else {
                    submitBtn.classList.add('error-state');
                    showMessage(data.message || '密码修改失败，请重试', 'error');
                }
            } catch (error) {
                console.error('修改密码请求失败:', error);
                submitBtn.classList.add('error-state');
                showMessage('网络连接异常，请检查网络后重试', 'error');
            } finally {
                setTimeout(() => {
                    setButtonState(submitBtn, false, '立即更改');
                    submitBtn.classList.remove('success-state', 'error-state');
                }, 2000);
            }
        }
        
        // 键盘事件处理
        document.addEventListener('keydown', function(e) {
            // ESC 键关闭模态框
            if (e.key === 'Escape') {
                if (registerOverlay.classList.contains('active')) {
                    hideModal(registerOverlay, registerModal);
                }
                if (forgotOverlay.classList.contains('active')) {
                    hideModal(forgotOverlay, forgotModal);
                }
                if (changePasswordOverlay.classList.contains('active')) {
                    hideModal(changePasswordOverlay, changePasswordModal);
                }
                // 关闭消息提示
                message.classList.remove('show');
            }
        });
        
        // 页面可见性变化处理
        document.addEventListener('visibilitychange', function() {
            if (document.visibilityState === 'visible') {
                // 页面重新可见时刷新验证码
                if (registerOverlay.classList.contains('active')) {
                    generateCaptcha();
                }
            }
        });
        
        // 防止表单重复提交
        let isSubmitting = false;
        
        function preventDoubleSubmit(callback) {
            return function(...args) {
                if (isSubmitting) return;
                isSubmitting = true;
                
                callback.apply(this, args).finally(() => {
                    setTimeout(() => {
                        isSubmitting = false;
                    }, 1000);
                });
            };
        }
        
        // 包装处理函数以防止重复提交
        const originalHandleLogin = handleLogin;
        const originalHandleRegister = handleRegister;
        const originalHandleForgotPassword = handleForgotPassword;
        const originalHandleChangePassword = handleChangePassword;
        
        handleLogin = preventDoubleSubmit(originalHandleLogin);
        handleRegister = preventDoubleSubmit(originalHandleRegister);
        handleForgotPassword = preventDoubleSubmit(originalHandleForgotPassword);
        handleChangePassword = preventDoubleSubmit(originalHandleChangePassword);
    </script>
</body>
</html>